<template>
  <!--  <div style={style} onMouseEnter={() => this.enter()} onMouseLeave={() => this.leave()}>-->
  <!--  {this.state.hover ? '*' + props.text + '*' : props.text}-->
  <!--  </div>-->

  <div :style="style">
    <!--        {{ text }}-->
    <slot></slot>
  </div>
</template>
<script>

const dotStyle = {
  position: 'absolute',
  background: '#61dafb',
  font: 'normal 15px sans-serif',
  textAlign: 'center',
  cursor: 'pointer',
}

export default {
  name: 'App',
  props: {
    size: {
      default: '',
      type: Number
    },
    x: {
      default: '',
      type: Number
    },
    y: {
      default: '',
      type: Number
    },
    text: {
      default: '',
      type: String
    },
  },
  data() {
    return {
      hover: false
    }
  },
  computed: {
    style() {
      var s = this.size * 1.3;
      return {
        ...dotStyle,
        width: s + 'px',
        height: s + 'px',
        left: (this.x) + 'px',
        top: (this.y) + 'px',
        borderRadius: (s / 2) + 'px',
        lineHeight: (s) + 'px',
        background: this.hover ? '#ff0' : dotStyle.background
      }
    }
  }

}
</script>

<style>


</style>
